<template>
	<div class="wrapper">
		<swiper :options="swiperOption">
			<swiper-slide v-for="item of imgList" :key="item.id">
				<img class="swiper-img" :src="item.imgUrl"/>
			</swiper-slide>
			<div class="swiper-pagination"  slot="pagination"></div>
		</swiper>
	</div>
</template>

<script>
export default {
  name: 'HomeSwiper',
  data: function() {
		return {
			swiperOption: {
				pagination: '.swiper-pagination',
				loop: true
			},
			imgList: [
				{id: '01', imgUrl: 'http://img1.qunarzz.com/piao/fusion/1806/f5/ea83238744f31102.jpg_750x200_73b8477c.jpg'},
				{id: '02', imgUrl: 'http://img1.qunarzz.com/piao/fusion/1806/e5/fc2bfc8bfcccd402.jpg_750x200_1218ab5f.jpg'}
			]
		}
  }
}
</script>

<style lang='stylus' scoped="">
	.swapper >>> .swiper-pagination-bullet-active {
		background: #FFFFFF;
	}
	.wrapper {
		overflow: hidden;
		width: 100%;
		height: 0;
		padding-bottom: 31.25%;
	}
	.swiper-img {
		width: 100%;
	}
</style>
